<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="https://static.91haoka.cn/vant.css" />
    <script src="https://static.91haoka.cn/vue.min.js"></script>
    <script src="https://static.91haoka.cn/vantall.js"></script>
    <script src="https://static.91haoka.cn/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css" />
</head>
<style type="text/css">
    * {
        box-sizing: border-box;
        font-family: 'PingFang SC';
        font-size: 14px;
    }

    .images_container {
        display: flex;
        justify-content: center;
    }

    .order_images {
        height: 85px;
        width: 85px;
        margin-top: 54px;
    }

    .phone_over {
        font-size: 14px;
        color: #404247;
        margin-top: 30px;
        font-weight: 400;
    }

    .phone_input {
        background: #F6F8FB;
        height: 45px;
        border: 1px #E3E8F1 solid;
        border-radius: 10px;
        width: 100%;
        margin-top: 10px;
        padding-left: 9.5px;
    }

    input::placeholder {
        color: #D4D7DE;

    }

    .id_container {
        margin-top: 10px;

    }

    .id_input {
        height: 45px;
        line-height: 45px;
        text-align: center;
        width: 45px;
        border: 1px #E3E8F1 solid;
        background: #F6F8FB;
        border-radius: 10px;
    }

    .query_btn {
        background: #005AFF;
        color: white;
        font-size: 15px;
        width: 100%;
        height: 45px;
        border-radius: 10px;
        margin-top: 30px;
    }

    .password-input {
        display: flex;
        justify-content: space-between;
    }

    .van-password-input__security li {
        width: 45px;
        height: 45px;
        border: 1px solid #E3E8F1;
        background: #F6F8FB;
        border-radius: 10px;
        line-height: 45px;
    }

    .van-password-input {
        margin: 0;
    }

    .van-step--vertical:not(:last-child)::after {
        border-bottom-width: 0;
    }
</style>

<body>
    <div id="app" style="background: #F6F8FB; min-height: 100vh;padding: 15px;overflow: hidden;" v-cloak>
        <div style="padding: 20px 15px;background-color: #FFFFFF;border-radius: 12px;">
            <div style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 10px;">
                <span style="color: #666666;font-size: 14px;display: flex;">快递公司</span>
                <span style="color:#333333;font-size: 14px;">{{trackingCompany}}</span>
            </div>
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <span style="color: #666666;font-size: 14px;display: flex;">快递单号</span>
                <span style="color:#333333;font-size: 14px;">{{tracking_number}}</span>
            </div>
        </div>
        <div v-if="tracking_button==1" style="padding: 20px 15px;background-color: #FFFFFF;margin-top: 15px;height: calc(100vh - 150px);border-radius: 12px;overflow: auto;">
            <van-steps direction="vertical" v-if="info?.Traces" active="0" active-color="#005AFF">
                <van-step v-for="(item, index) in info.Traces" v-if="index<TracesArrow" :key="index">
                    <div><span style="font-size: 16px;">{{item?.Location}}</span> <span style="margin-left: 5px;"> {{item?.AcceptTime}}</span></div>
                    <p>{{item?.AcceptStation}}</p>
                </van-step>
                <van-step>
                    <div v-if="TracesArrow>4" @click="TracesArrow=4">收起更多物流明细 <van-icon name="arrow-up" /></div>
                    <div v-else @click="TracesArrow=info?.Traces?.length">展开更多物流明细 <van-icon name="arrow-down" /></div>
                </van-step>
            </van-steps>
        </div>
    </div>


    <script>
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;


        new Vue({
            el: '#app',
            data: function () {
                return {
                    apis: '',
                    info: {},
                    TracesArrow: 4,
                    tracking_button:0,
                    tracking_number:'',
                    trackingCompany:''
                }
            },
            created() {

            },
            mounted() {
                if (location.href.includes('localhost') || location.href.includes('192.168.2.216')) {
                    this.apis = '/apis'
                }
                this.trackingCompany=decodeURIComponent(this.getUrlParam('trackingCompany'))
                this.tracking_number=decodeURIComponent(this.getUrlParam('tracking_number'))
                this.tracking_button=this.getUrlParam('tracking_button')

                this.getTrackInfo()
            },
            methods: {
                getUrlParam: function (name) {
                    var query = window.location.search.substring(1);
                    var vars = query.split("&");
                    for (var i = 0; i < vars.length; i++) {
                        var pair = vars[i].split("=");
                        if (pair[0] == name) { return pair[1]; }
                    }
                    return (false);
                },
                getTrackInfo: function () {
                    axios.get(`${this.apis}/api/get/track/info?order_id=${this.getUrlParam('order_id')}&id=${this.getUrlParam('id')}`)
                        .then(response => {
                            if (response.data.msg.code == 0) {
                                this.info = response.data.data
                            } else {
                                vant.Toast(response.data.msg.info);
                            }
                        })
                }
            },
            watch: {

            },
        });


    </script>
</body>

</html>